<template>
<el-row class="home" :gutter="20">
  <el-col :span="8">
    <el-card shadow="hover">
      <div class="user">
        <img :src="userImg">
        <div class="userInfo">
          <p class="name">Admin</p>
          <p class="access">超级管理员</p>
        </div>
      </div>
      <div class="loginInfo">
        <p> 上次登录时间： <span> 2022-3-4 </span></p>
        <p> 上次登录地点： <span> 徐州 </span></p>
      </div>
    </el-card>

    <el-card style="margin-top: 20px; height: 480px">
      <el-table :data="tableData">
        <el-table-column v-for="(item,index) in tableLabel" :key="index" :prop="index" :label="item">
        </el-table-column>
      </el-table>
    </el-card>
  </el-col>

  <el-col span="16" style="margin-top: 20px">
    <div class="num">
      <el-card v-for="item in countData" :key="item.name" :body-style="{display: 'flex', padding: 0}">
        <i class="icon" :class="`el-icon-${item.icon}`" :style="{ background: item.color }"></i>
        <div class="detail">
          <p class="num"> {{item.value}} </p>
          <p class="tex"> {{item.name}} </p>
        </div>
      </el-card>
    </div>
    <el-card style="height: 280px">
      <!-- <div style="height: 280px" ref="echarts"></div> -->
      <echart :chartData="echartData.order" style="height: 280px"/>
    </el-card>
      <div class="graph">
        <el-card style="height: 260px">
          <!-- <div style="height: 280px" ref="userEcharts"></div> -->
          <echart :chartData="echartData.user" style="height: 280px"/>
        </el-card>
        <el-card style="height: 260px">
          <!-- <div style="height: 240px" ref="vedioEcharts"></div> -->
          <echart :chartData="echartData.video" :isAxisChart="false" style="height: 240px"/>
        </el-card>
      </div>
  </el-col>
</el-row>
</template>

<script>
import { getData } from '../../api/data.js'
import Echart from '@/components/Echarts.vue'
export default {
  name: 'home',
  components: {
    Echart
  },
  data() {
    return{
      userImg: require('@/assets/images/user.png'),
      tableData: [
        {
          name: 'oppo',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: 'vivo',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '苹果',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '小米',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '三星',
          todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        },
        {
          name: '魅族',
         todayBuy: 100,
          monthBuy: 300,
          totalBuy: 800
        }
      ],
      tableLabel: {
        name: '课程',
        todayBuy: '今日购买',
        monthBuy: '本月购买',
        totalBuy: '总购买',
      },
      countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ],
      echartData: {
        order: {
          xData: [],
          series: []
        },
        user: {
          xData: [],
          series: []
        },
        video: {
          series: []
        }
      }
    }
  },
  mounted () {
    getData().then(res => {
      const {code, data} = res
      if(code === 20000) {
        this.tableData = data.tableData
        const order = data.orderData
        const xData = order.date
        const keyArray = Object.keys(order.data[0])
        const series = []
        keyArray.forEach(key => {
          series.push({
            name: key,
            data: order.data.map(item => item[key]),
            type: 'line'
          })
        })
        // 折线图
       this.echartData.order.xData = xData
       this.echartData.order.series = series

       this.echartData.user.xData = data.userData.map(item => item.new)
       this.echartData.user.series = [
         {
           name: '新增用户',
           data: data.userData.map(item => item.new),
           type: 'bar'
         },
         {
           name: '活跃用户',
           data: data.userData.map(item => item.active),
           type: 'bar'
         }
       ]

       this.echartData.video.series = [
        {
          data: data.videoData,
          type: 'pie'
          }
        ]
     }
      console.log(res);
    })
  }

}
</script>

<style scoped lang="less"></style>
